<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .hex_wrapper {
            width: 120px;
            height: 104px;
            display: block;
            float: left;
            margin-bottom: -43px;
        }

        .hex {
            margin: 0 auto;
            width: 60px;
            height: 104px;
            background-color: #eff0f4;
            position: relative;
            border-radius: 4px;
            transition: all .15s ease-in;
            backface-visibility: hidden;

        }

        .hex_wrapper + .hex_wrapper {
            margin-left: 78px;
        }

        .hex_wrapper:hover .hex {
            animation: hvr-pop .2s ease-in 1;
            animation-fill-mode: forwards;
        }

        @-webkit-keyframes hvr-pop {
            50% {
                transform: scale(1.1);
                background-color: #fff;
            }

            100% {
                background-color: #2dd4af;
            }
        }

        @keyframes hvr-pop {
            50% {
                transform: scale(1.1);
                background-color: #fff;
            }
            100% {
                background-color: #2dd4af;
            }
        }

        .hex:before,.hex:after {
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: inherit;
            transform-origin: center center;
            border-radius: 4px;
        }

        .hex:before {
            transform: rotate(60deg);
        }

        .hex:after {
            transform: rotate(-60deg);
        }

        .hex_container {
            width: 912px;
            height: 226px;
            margin: 0 auto;
            padding: 0;
            list-style: none;
        }

        .hex_row:nth-child(odd){
            margin-left: 99px;
        }

        .hex_row:before,.hex_row:after {
            clear: both;
            content: '';
            display: table;
        }
    </style>
</head>
<body>
<ul class="hex_container">
    <li class="hex_row">
        <a class="hex_wrapper" href="javascript:;">
            <div class="hex"></div>
        </a>
        <a class="hex_wrapper" href="javascript:;">
            <div class="hex"></div>
        </a>
        <a class="hex_wrapper" href="javascript:;">
            <div class="hex"></div>
        </a>
        <a class="hex_wrapper" href="javascript:;">
            <div class="hex"></div>
        </a>
    </li>
    <li class="hex_row">
        <a class="hex_wrapper" href="javascript:;">
            <div class="hex"></div>
        </a>
        <a class="hex_wrapper" href="javascript:;">
            <div class="hex"></div>
        </a>
        <a class="hex_wrapper" href="javascript:;">
            <div class="hex"></div>
        </a>
        <a class="hex_wrapper" href="javascript:;">
            <div class="hex"></div>
        </a>
        <a class="hex_wrapper" href="javascript:;">
            <div class="hex"></div>
        </a>
    </li>
    <li class="hex_row">
        <a class="hex_wrapper" href="javascript:;">
            <div class="hex"></div>
        </a>
        <a class="hex_wrapper" href="javascript:;">
            <div class="hex"></div>
        </a>
        <a class="hex_wrapper" href="javascript:;">
            <div class="hex"></div>
        </a>
        <a class="hex_wrapper" href="javascript:;">
            <div class="hex"></div>
        </a>
    </li>
</ul>
</body>
</html>